<template>
	<statusBarVue title="商品详情" :isShowBar="true" :isShowLeft="true" />
	<view class="mall-detail-page" :style="pageHaveBarStyle">
		<view class="mall-detail">
			<view class="swiper-group">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<image
							src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg"
							alt="" srcset=""
							@click.stop="handlePreviewImage('https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg')" />
					</swiper-item>
					<swiper-item>
						<image
							src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg"
							alt="" srcset=""
							@click.stop="handlePreviewImage('https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg')" />
					</swiper-item>
					<swiper-item>
						<image
							src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg"
							alt="" srcset=""
							@click.stop="handlePreviewImage('https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg')" />
					</swiper-item>
					<swiper-item>
						<image
							src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg"
							alt="" srcset=""
							@click.stop="handlePreviewImage('https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/7216855a-92e9-4376-ad7e-a13672a877a6.jpg')" />
					</swiper-item>
				</swiper>
			</view>
			<view class="price-group">
				<view class="price">
					¥<text class="val">939</text>
				</view>
				<view class="nums">
					<view class="initial">¥<text>1342</text></view>
					<view class="block"></view>
					<view class="amount">已售 15件</view>
				</view>
			</view>
			<view class="mall-detail-page-group">
				<view class="mall-detail-introduce">
					<view class="tit-text">
						优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块
					</view>
					<view class="tag-text">
						<view class="tag">
							<image src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/84f256c4-fecf-4731-8d49-f870d1d049a7.png"></image>
							<text class="text">30 天价保险</text>
						</view>
						<view class="tag">
							<image src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/84f256c4-fecf-4731-8d49-f870d1d049a7.png"></image>
							<text class="text">免费上门退换</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mall-detail-page-group">
				<view class="mall-detail-model">
					<view class="model-text">
						请选择：接口类型 / 颜色分类
					</view>
				</view>
			</view>
			<view class="mall-detail-page-group">
				<view class="mall-detail-content">
					<view class="mall-detail-content-tit">
						<!-- 产品介绍 -->
					</view>
					<view class="mall-detail-content-img">

					</view>
				</view>
			</view>
			<view class="mall-detail-page-group">
				<view class="mall-detail-reviews">
					<view class="mall-detail-reviews-tit">
						<view class="tit-text">
							买家评价 999+条
						</view>
						<view class="tit-count">
							好评度99% <uni-icons type="right" size="12"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>



		<!-- 商品清单 -->
		<uni-popup ref="pricePpopup" type="bottom" borderRadius="16px 16px 0 0" safeArea backgroundColor="#fff"
			@maskClick="handlePopupClose">
			<view class="price-popup">
				<view class="price-popup-h">
					<view class="img">
						<image src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/5c09f5c9-6fa8-4b4c-a975-49f8019c0d7e.jpg"></image>
					</view>
					<view class="title">
						<view class="text">
							PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块
						</view>
						<view class="price">
							<view class="price-text">
								<view class="now">
									<text class="unit">￥</text><text class="num">929</text>到手价
								</view>
								<view class="initial">
									¥1039
								</view>
							</view>
							<view class="stock">
								剩余库存：1000
							</view>
						</view>
					</view>
				</view>
				<view class="price-popup-b">
					<view class="address">
						<view class="tit" @click="goToPage('/homePages/mall/address')">
							<text class="tit-text">
								唔系迪西…xxxx地址xxx区xxx
							</text>
							<uni-icons type="right" size="12"></uni-icons>
						</view>
						<view class="description">
							快递运输 预计5月26日24:00前发货，5月28日24:00前送达
						</view>
					</view>
					<view class="price">
						<view class="price-list">
							<view class="label-l">
								商品金额
							</view>
							<view class="label-r">
								<text>￥1081.00</text>
							</view>
						</view>

						<view class="price-list">
							<view class="label-l">
								运费
							</view>
							<view class="label-r">
								<text>￥0.00</text>
							</view>
						</view>
						<view class="price-list">
							<view class="label-l">
								跨店满减
							</view>
							<view class="label-r">
								<text class="minus">-￥150.00</text>
							</view>
						</view>
						<view class="price-list">
							<view class="label-l">
								优惠劵
							</view>
							<view class="label-r">
								<text class="minus">-￥2.00</text>
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="price-popup-f">
					<view class="total">
						合计：
						<view class="num">
							<text class="unit">¥</text>
							<text class="price-1">929.</text>
							<text class="price-2">00</text>
							<text class="price-3">共减¥183.00</text>
						</view>
					</view>
					<button @click="goToPage('/homePages/mall/confirm')">立即支付</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				options: [{
					icon: 'shop-filled',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				modelIndex: 0,
				modelList: [
					'边缘计算PLC网关裸机（不含配件）',
					'边缘计算PLC网关 配4G+WIFI天线电源',
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#FFE7CB',
						color: '#A75801'
					},
					{
						text: '立即购买',
						backgroundColor: '#22A366',
						color: '#fff'
					}
				],

			}
		},
		onShareAppMessage() {
			// 监听用户右上角的转发
		},
		onShareTimeline() {
			// 监听用户右上角的分享到朋友圈
		},
		methods: {
			// 左侧点击事件
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			// 右侧按钮组点击事件
			buttonClick(e) {
				// 加入购物车
				if (e.index === 0) {

				}
				// 立即购买
				if (e.index === 1) {
					this.$refs.pricePpopup.open('bottom')
				}
			},
			// 关闭弹框
			handlePopupClose() {
				this.$refs.pricePpopup.close();
			},
		}
	}
</script>

<style lang="scss">
	.mall-detail-page {
		position: relative;
		left: 0;
		right: 0;
		overflow: hidden;
		font-family: "Arial";

		.mall-detail {
			height: calc(100% - 50px - (env(safe-area-inset-bottom)));
			overflow: auto;
		}

		.swiper-group {
			width: 748rpx;
			height: 748rpx;

			.swiper {
				width: 748rpx;
				height: 748rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.price-group {
			width: 100%;
			height: 88rpx;
			background: #22A366;
			padding: 0 32rpx;
			box-sizing: border-box;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price {
				.val {
					font-family: DINAlternate-Bold;
					font-weight: 700;
					font-size: 48rpx;
					color: #FFFFFF;
					letter-spacing: 0;
				}
			}

			.nums {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				letter-spacing: 0;
				display: flex;

				align-items: center;

				.initial {
					opacity: 0.4;
				}

				.block {
					margin: 0 10.14rpx 0 13.86rpx;
					width: 2rpx;
					height: 20.52rpx;
					background-color: #FFFFFF;

				}

				.amount {}
			}
		}

		&-group {
			width: 100%;
			border-radius: 17px;
			background: #ffffff;
			// margin: 10px auto;

			.mall-detail-introduce {
				padding: 8px 13px 8px 19px;

				.price {
					margin-bottom: 10px;

					.unit {
						color: #fd381d;
						font-size: 15px;
						font-weight: 400;
					}

					.num {
						color: #f8401e;
						font-size: 25px;
						font-weight: 400;
					}

					.num-s {
						color: #f8401e;
						font-size: 15px;
						font-weight: 400;
					}
				}

				.tit-text {
					height: 60px;
					color: #3d3d3d;
					font-size: 20px;
					font-weight: 400;
					line-height: 30px;
					margin-bottom: 5px;
				}

				.tag-text {
					color: #A4590A;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 36rpx;

					.tag {
						background-color: #FCF5E5;
						padding: 0rpx 30rpx;
						box-sizing: border-box;
						border-radius: 8rpx;
						height: 60rpx;
						line-height: 60rpx;
						margin-left: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						&:first-child {
							margin-left: 0;
						}

						image {
							width: 38rpx;
							height: 34rpx;
							margin-right: 10rpx;
						}

						.text {
							font-size: 28rpx;
							padding-top: 4rpx;
						}
					}
				}
			}

			.mall-detail-model {
				padding: 0 38rpx;
				height: 60rpx;
				color: #ff213a;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 60rpx;

			}

			.mall-detail-reviews {
				padding: 0 22rpx 36rpx;

				&-tit {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tit-text {
						height: 60rpx;
						color: #000000;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 60rpx;

						&::before {
							content: "";
							display: inline-block;
							height: 34rpx;
							width: 6rpx;
							background: linear-gradient(0deg, #e8d9d2 35%, #f06045 100%);
							margin-right: 6rpx;
							position: relative;
							top: 8rpx;
						}
					}

					.tit-count {
						height: 60rpx;
						color: #999999;
						font-size: 22rpx;
						font-weight: 400;
						line-height: 60rpx;
					}
				}
			}

			.mall-detail-content {
				&-tit {
					height: 60rpx;
					color: #000000;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 60rpx;
					padding: 12rpx 50rpx 0;
				}
			}
		}

		.goods-carts {
			background-color: #fff;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
			padding-bottom: calc(env(safe-area-inset-bottom));


			.uni-tab__right {
				border-radius: 8rpx;
			}
		}

		.price-popup {
			border-radius: 16px 16px 0px 0px;
			background-color: #F6F6F6;

			&-h {
				padding: 40rpx 38rpx 0;
				margin-bottom: 18rpx;
				display: flex;

				.img {
					width: 156rpx;
					height: 156rpx;
					border: 2rpx solid #F5F6FA;
					margin-right: 28rpx;

					image {
						width: 156rpx;
						height: 156rpx;
					}
				}

				.title {
					.text {
						color: #3d3d3d;
						font-size: 30rpx;
						font-weight: 400;
						margin-bottom: 40rpx;
					}

					.price {
						margin-bottom: 10px;
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.price-text {
							display: flex;
							align-items: baseline;

							.now {
								color: #D80C18;
								font-family: DINAlternate;
								font-weight: 400;
								font-size: 24rpx;

								.unit {
									text-align: center;
									font-size: 24rpx;
								}

								.num {
									font-size: 40rpx;
								}
							}

							.initial {
								opacity: 0.6;
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 24rpx;
								color: #1E1F23;
								margin-left: 22rpx;
								text-decoration: line-through;
							}
						}
					}

					.stock {
						width: 146rpx;
						height: 22rpx;
						color: #999999;
						text-align: left;
						font-size: 20rpx;
						font-weight: 400;

					}
				}
			}

			&-b {
				padding: 14rpx 24rpx;

				.address {
					border-radius: 16rpx;
					background-color: #fff;
					padding: 30rpx 21rpx 32rpx;
					margin-bottom: 18rpx;

					.tit {
						height: 42rpx;
						font-family: PingFangSC-Semibold;
						font-weight: 600;
						font-size: 30rpx;
						color: #000000;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 28rpx;
					}

					.description {
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						letter-spacing: 0;
						padding: 0 2rpx;
					}
				}

				.price {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 20rpx 12rpx 30rpx 14rpx;
					margin-bottom: 88rpx;

					.price-list {
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						font-size: 24rpx;
						padding: 10rpx 4rpx;

						.label-l {
							color: #A6A6A6;
						}

						.label-r {
							color: #000;
							font-weight: 600;

							.minus {
								color: #E92717;
							}
						}
					}
				}

			}

			&-f {
				padding: 16rpx 34rpx 40rpx;
				box-sizing: border-box;
				background-color: #fff;
				

				.total {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					display: flex;
					justify-content: flex-start;
					align-items: baseline;
					margin-bottom: 30rpx;

					.num {
						font-face: DINAlternate;
						font-weight: 700;
						color: #d80c18;

						.unit {
							font-size: 36rpx;
						}

						.price-1 {
							font-size: 60rpx;
						}

						.price-2 {
							font-size: 36rpx;
						}
						
						.price-3 {
							font-weight: 400;
							font-size: 24rpx;
							margin-left: 12rpx;
						}
					}
				}

				button {
					width: 682rpx;
					height: 76rpx;
					background: #22A366;
					border-radius: 8rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>